<template>
  <div>
    <my-header
      ><el-breadcrumb-item>公益管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户公益</el-breadcrumb-item></my-header
    >
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="7"
          ><!-- 输入框 -->
          <el-input
            placeholder="请输入公益名称"
            clearable
            v-model="inputValue"
            @clear="getPublicList"
          >
            <template #append>
              <el-button icon="Search" @click="onSearchList" />
            </template> </el-input
        ></el-col>
      </el-row>

      <!-- 公益列表区域 -->
      <el-table :data="userPublicList" style="width: 100%" border stripe>
        <!-- 索引列 -->
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="nice.name" label="公益名称"></el-table-column>
        <el-table-column prop="name" label="用户名"></el-table-column>
        <el-table-column prop="point" label="积分"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === '1'">已完成</el-tag>
            <el-tag type="warning" v-else>待参加</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="公益状态">
          <template #default="scope">
            <el-tag
              class="mx-1"
              effect="dark"
              :style="{ cursor: scope.row.status === '1' ? 'not-allowed' : 'pointer' }"
              @click="lookDetail(scope.row)"
            >
              提交
            </el-tag>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        :page-sizes="[1, 2, 5, 10]"
        small="small"
        background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userPublicList.length"
      />

      <!-- 查看用户公益的对话框 -->
      <el-dialog
        v-model="lookDialogVisible"
        title="查看用户公益"
        width="30%"
      >
        <!-- 内容主体区域 -->
        <el-form ref="lookFormRef" :model="lookForm" status-icon label-width="70px">
          <el-form-item label="公益名称">
            <el-input v-model="lookForm.nice.name" disabled />
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="lookForm.name" disabled />
          </el-form-item>
          <el-form-item label="积分">
            <el-input v-model="lookForm.point" disabled />
          </el-form-item>
          <el-form-item label="积分">
            <span>该用户是否已参加公益？</span>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="lookDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmLookDialog">确认</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 已经完成公益的对话框 -->
      <el-dialog
        v-model="confirmDialog"
        title="查看用户公益"
        width="30%"
        @close="lookDialogClosed"
      >
        <span>已完成公益啦</span>
        <!-- 底部区域 -->
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmEventDialog">确认</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { userPublic, updateUserPublic } from '../../api/public.js'
export default {
  data() {
    return {
      inputValue: '',
      userPublicList: [],
      lookDialogVisible: false,
      lookForm: [],
      confirmDialog: false
    }
  },
  created() {
    this.getUserPublic()
  },
  methods: {
    onSearchList() {
      this.userPublicList = this.userPublicList.filter((item) =>
        item.nice.name.includes(this.inputValue)
      )
    },
    // 获取用户公益列表
    async getUserPublic() {
      const { data: res } = await userPublic()
      if (res.code !== 1) {
        return this.$message.error('获取用户公益事件列表失败')
      }
      this.userPublicList = res.data
    },
    // 编辑用户公益状态
    async UserPublicChanged(publicInfo) {
      console.log(publicInfo.id)
      const { data: res } = await updateUserPublic({ niceId: publicInfo.id })
      if (res.code !== 1) {
        return this.$message.error('修改失败！')
      } else {
        publicInfo.status = !publicInfo.status
        return this.$message.success('修改成功！')
      }
    },
    lookDetail (item) {
      if (item.status === '0') {
        this.lookForm = item
        this.lookDialogVisible = true
      } else {
        this.confirmDialog = true
      }
    },
    // 已经完成公益
    confirmEventDialog () {
      this.confirmDialog = false
    },
    // 公益确认
    async confirmLookDialog () {
      console.log(this.lookForm.id)
      const { data: res } = await updateUserPublic({ userId: this.lookForm.userid, niceId: this.lookForm.niceid })
      if (res.code !== 1) {
        return this.$message.error('修改失败！')
      } else {
        this.lookDialogVisible = false
        this.getUserPublic()
        return this.$message.success('修改成功！')
      }
    }
  }
}
</script>

<style lang="less" scoped></style>
